<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>购物车</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/shop_cart.css}">
    <link th:href="@{/css/common.css}" rel="stylesheet"/>
    <link th:href="@{/css/select2.css}" rel="stylesheet"/>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="shopping-car-container ">
    <div class="text-right">
        <a th:href="@{/index.html}" class="btn btn-info m-3" >
            <i class="fa fa-cart-plus" aria-hidden="true"></i> 继续选购</a>
    </div>
    <div class="car-headers-menu">
        <div class="row">
            <div >
                <div class="col-md-1 car-menu">
                    <label >
                    <input type="checkbox" id="check-goods-all" class="btn"/>
                        全选
                    </label>
                </div>
                <b class="col-md-3 car-menu" >商品信息</b>
                <b class="col-md-2 car-menu">单价</b>
                <b class="col-md-2 car-menu">数量</b>
                <b class="col-md-2 car-menu">金额</b>
                <b class="col-md-2 car-menu">操作</b>
            </div>
        </div>
    </div>
    <div class="goods-content">
        <div class="goods-item" th:each="item:${shopcart}">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="col-md-1 car-goods-info">
                        <label><input type="checkbox" class="goods-list-item" th:id="${item.foodid}"/></label>
                    </div>
                    <div class="col-md-3 car-goods-info goods-image-column">
                        <img class="goods-image" th:src="@{'/images/' + ${item.image}}" style="width: 100px; height: 100px;"/>
                        <span class="goods-info">
                [[${item.name}]]
                </span>
                    </div>
                    <div class="col-md-2 car-goods-info goods-price"><span>￥</span><span class="single-price" th:id="${'price'+item.foodid}"> [[${item.price}]]  </span>
                    </div>
                    <div class="col-md-2 car-goods-info goods-counts">
                        <div class="input-group">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default car-decrease" th:onclick="outputId([[${item.foodid}]])">-</button>
                            </div>
                            <!--修改框-->
                            <input type="text" class="form-control goods-count" th:value="${item.count}" th:id="${'count'+item.foodid}"
                                   th:onchange="setCount([[${item.foodid}]])">
                            <div class="input-group-btn">
                                <button type="button" class="btn btn-default car-add" th:onclick="outputId([[${item.foodid}]])">+</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-2 car-goods-info goods-money-count"><span>￥</span><span class="single-total" th:id="${'prices'+item.foodid}"> [[${item.price}*${item.count}]]</span>
                    </div>
                    <div class="col-md-2 car-goods-info goods-operate">
                        <button type="button" class="btn btn-danger item-delete" th:onclick="outputId([[${item.foodid}]])"><i class="fa fa-trash-o" aria-hidden="true"></i> 删除</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-body bottom-menu-include">
            <div class="col-md-1 check-all-bottom bottom-menu">
                <label>
                    <input type="checkbox" id="checked-all-bottom"/>
                    <span id="checkAllBottom">全选</span>
                </label>
            </div>
            <div class="col-md-8 bottom-menu">
                <label for="select" class="text-danger p-1">请填写地址信息</label>
                <div class="main form-inline">
                    <div id="select">
                        <select id="loc_province" style="width:120px; margin-left: 10px">
                        </select>
                        <select id="loc_city" style="width:120px; margin-left: 10px">
                        </select>
                        <select id="loc_town" style="width:120px;margin-left: 10px">
                        </select>
                        <input class="form-control" type="text" id="detail" placeholder="请输入详细地址精确到门牌号">
                    </div>
                </div>
            </div>
            <div class="col-md-1 bottom-menu">
                <span>已选商品 <span id="selectGoodsCount">0</span> 件</span>
            </div>
            <div class="col-md-1 bottom-menu">
                <span>合计：<span id="selectGoodsMoney">0.00</span></span>
            </div>
            <div class="col-md-1 bottom-menu submitData submitDis" id="settlement">
                结算
            </div>
        </div>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="deleteItemTip" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    确认删除此商品？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary deleteSure">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/js/shop_cart.js}"></script>
<script type="text/javascript" th:src="@{/js/location.js}"></script>
<script type="text/javascript" th:src="@{/js/select2.js}"></script>
<script type="text/javascript" th:src="@{/js/select2_locale_zh-CN.js}"></script>
</html>